<template>
  <div class="px-[10%] bg-[#ccc] min-h-screen">
    <h2 class="mt-2">a-row(增加默认flex布局)</h2>
    <a-row class="mt-10"  :gutter="[24, 24]" >
      <a-col :span="6" v-for="(item,index) in list" :key="index">
        <div class="bg-red-100 py-10">
          content-{{index}}
        </div>
      </a-col>
    </a-row>
    <h2 class="mt-2">a-card去除内边距</h2>
    <a-card title="Default size card">
      <p>card content</p>
      <p>card content</p>
      <p>card content</p>
    </a-card>
    <h2 class="mt-2">支持多行隐藏line-clamp-3</h2>
    <p class=" line-clamp-3 w-1/4">
      fldjsa肌肤的离开洒家发的离开洒家来看待世界啊克里夫激动撒开了就看见 就是拉开甲方收到了空间来看待世界考了几分但是
      fldjsa肌肤的离开洒家发的离开洒家来看待世界啊克里夫激动了空间来看待世界考了几分但是
    </p>
    <h2 class="mt-2">宽高比（aspect-ratio）</h2>
    <div class="w-1/4">
      <div class="aspect-w-2 aspect-h-1 bg-red-200">
        <!-- <img src="@/assets/images/logo.png" alt="logo" class="w-1/3"> -->
      </div>
    </div>
    <h2 class="mt-2">支持汉化</h2>
    <a-pagination show-quick-jumper :default-current="2" :total="500" />
    <h2 class="mt-2">支持段落缩进（indent）</h2>
    <p class="indent-10">的撒娇封建等级少康  上课解放拉萨就开发商的卡的 看到洒家分厘卡电视机看是的JFK的撒，是的，JL副都看傻了临时卡， </p>
    <p>上课解放拉萨就开发商的卡的上课解放拉萨就开发商的卡的</p>
  </div>
</template>


<script>
export default {
  name: 'Index',
  data() {
    return {
      list: [1,2,3,4]
    };
  },
};
</script>
<style scoped></style>